<template>
  <div class="list-wrap">
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="14" :xl="9" :xxl="7">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" v-model="searchType">
                <a-select-option :value="0">全部</a-select-option>
                <a-select-option :value="1">会员id</a-select-option>
                <a-select-option :value="2">会员名称</a-select-option>
                <a-select-option :value="3">店铺名称</a-select-option>
                <a-select-option :value="4">交易流水号</a-select-option>
                <a-select-option :value="5">会员手机号</a-select-option>
                <!-- 0全部 1 会员id 2 会员名称 3店铺名称 4 交易流水号 5 会员手机号 -->
              </a-select>
              <a-input style="width: 60%" placeholder="请输入查询条件" v-model="keyword"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="9" :xxl="7">
          <a-form-item label="交易时间">
            <date :value="time" @change="dateChange"/>
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="8" :xxl="6">
          <div class="top-btns">
            <a-button @click="searchList" type="primary">查询</a-button>
            <a-button @click="resetList">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      :columns="columns"
      rowKey="index"
      :dataSource="receiptData"
      :pagination="pagination"
      :loading="loading"
      :scroll="scrollX"
    ></a-table>
    <pagination
      :total="total"
      @loadDataList="pageInit"
      ref="pageBand"
    />
  </div>
</template>

<script>
// 商户收款列表
import { merchantConsume } from '../../store/merchantApi.js'
export default {
  name: 'receiptList',
  data () {
    return {
      form: this.$form.createForm(this),
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      pagination: false,
      loading: false,
      searchType: 0,
      time: [],
      start_time: 0,
      end_time: 0,
      keyword: '',
      total: 0,
      columns: [
        {
          dataIndex: 'index',
          title: '序号',
          fixed: 'left',
          width: 60
        },{
          dataIndex: 'member_id',
          title: '会员id'
        },{
          dataIndex: 'real_name',
          title: '会员姓名'
        },{
          dataIndex: 'phone',
          title: '会员手机号'
        },{
          dataIndex: 'merchant_no',
          title: '商家号'
        },{
          dataIndex: 'merchant_name',
          title: '商家名称'
        },{
          dataIndex: 'store_name',
          title: '店铺名称'
        },{
          dataIndex: 'amount',
          title: '金额'
        },{
          dataIndex: 'created_at',
          title: '交易时间'
        },{
          dataIndex: 'bank_type',
          title: '银行类型'
        },{
          dataIndex: 'fund_bill_list',
          title: '支付类型'
        },{ //fund_bill_list
          dataIndex: 'pay_no',
          title: '交易流水号'
        }
      ],
      receiptData: [],
      scrollX: {}
    }
  },
  methods: {
    pageInit (info) {
      this.loading = true
      merchantConsume({
        start_time: this.start_time,
        end_time: this.end_time,
        search_type: this.searchType,
        name: this.keyword,
        page: info.page,
        num: info.pageSize
      }).then(res => {
        this.loading = false
        var array = res.data.list
        for (let i = 0; i < array.length; i++) {
          array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.receiptData = array
        if (res.data.list.length > 0) {
          this.scrollX = { x: 2500 }
        } else {
          this.scrollX = {}
        }
        // 分页器
        this.total = res.data.total_num
      })
    },
    searchList() {
      this.$refs.pageBand.getData()
    },
    resetList() {
      this.searchType = 0
      this.time = []
      this.start_time = 0
      this.end_time = 0
      this.keyword = ''
      this.$refs.pageBand.getData()
    },
    // 时间改变
    dateChange({ date, start_time, end_time }) {
      this.time = date
      this.start_time = start_time
      this.end_time = end_time
      console.log(date, start_time, end_time)
    },
  }
}
</script>

<style>

</style>
